<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model="listQuery.userId"
        placeholder="用户ID"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <div style="float: right;">
        <el-switch
          v-model="stickStatus"
          :active-value="1"
          :inactive-value="0"
          inactive-text="推荐置顶"
          @change="changeStickStatus"
        >
        </el-switch>
        <el-button
          class="filter-item"
          size="small"
          type="primary"
          @click="handleClose"
        >
          添加推荐
        </el-button>
      </div>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="用户ID" prop="userLiveId" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.userLiveId == curUserId ? 'red' : ''">
              <TooptipsCom :user-id="scope.row.userLiveId" />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createAt | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding"
        >
          <template slot-scope="{ row }">
            <el-button
              :type="row.blacklist ? 'primary' : 'danger'"
              @click="setRecommandList(row)"
            >
              {{ '删除' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <div style="color: red;margin-bottom: 20px;">
        填写用户ID,多个用户,隔开或换行隔开
      </div>
      <el-input
        v-model.trim="numberList"
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAccount">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination' // secondary package based on el-pagination
import {
  getRecommendSteamerList,
  getRecommendTopSwitch,
  getRecommendTopSwitchStatus,
  addRecommendSteamer,
  deleteRecommendSteamer
} from '@/api/customSetting'

export default {
  name: 'RecommandList',
  components: { TablePagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        userId: undefined
      },
      stickStatus: null,
      curUserId: undefined,
      numberList: undefined,
      dialogTitle: '推荐',
      dialogFormVisible: false
    }
  },
  created() {
    this.doSearch()
    this.getStickStatus()
  },
  methods: {
    getStickStatus() {
      getRecommendTopSwitchStatus().then(response => {
        this.stickStatus = response.data.type
        console.log(this.stickStatus)
      })
    },
    changeStickStatus(option) {
      getRecommendTopSwitch({ type: option }).then(response => {
        this.$message.success('修改成功')
      }).catch(response => {
        this.$message.error(response)
      })
    },
    doSearch() {
      this.listLoading = true
      getRecommendSteamerList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleClose() {
      this.dialogTitle = '加入推荐列表'
      this.dialogFormVisible = true
    },
    handleOpen() {
      this.dialogTitle = '移除'
      this.dialogFormVisible = true
    },
    handleAccount() {
      this.joinRecommandList(this.numberList)
    },
    setRecommandList({ userLiveId }) {
      this.$confirm(`是否将此用户移除推荐列表?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRecommendSteamer({ userId: userLiveId }).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.doSearch()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    joinRecommandList(userIds) {
      addRecommendSteamer({ userIds }).then(response => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.dialogFormVisible = false
        this.numberList = null
        this.doSearch()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.red {
  color: red;
}
</style>
